<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link type="text/css" rel="stylesheet" href="css/liMarquee.css">
		<link type="text/css" rel="stylesheet" href="css/idangerous.swiper.css">
		<link type="text/css" rel="stylesheet" href="css/common.css">
		<link type="text/css" rel="stylesheet" href="css/companyIndex1.css">
		<link type="text/css" rel="stylesheet" href="css/company2.css">
		<link type="text/css" rel="stylesheet" href="css/company3.css">
		<title>安全应急视图</title>
	</head>

	<body>
		<div class="main">
			<!--公用头部   开始-->
			<div class="com_header">
				<h2>安全应急视图</h2>
				<ul class="clearfix header_right">
					<li onclick="fullScreen()">全屏显示</li>
					<li onclick="exitScreen()">退出全屏</li>
					<li>关闭驾驶舱</li>
				</ul>
			</div>
			<!-- 二屏     -->
			<div class="company2 clearfix hide">
				<div class="company2-con1">
					<div class="t-t">
						<p class="yl">今日作业风险</p>
						<ul class="company2-chart-nav1 company-nav">
							<li class="active">风险列表</li>
							<li>类别对比</li>
						</ul>
					</div>
					<div class="company2-table">
						<table>
							<tr>
								<th>单位</th>
								<th>类别</th>
								<th>时间</th>
								<th>区域</th>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">安全防护设施拆除申请</p>
								</td>
								<td>2019-02-28~<br>2019-03-01</td>
								<td>
									<span>4号楼及附属地下室</span>
								</td>
							</tr>
							
						</table>
					</div>
					<div id="company2-chart1" style="display: none;"></div>
				</div>
				<div class="company2-con2">
					<div class="t-t">
						<p class="yl">隐患排名</p>
						<ul class="company2-chart-nav2 company-nav">
							<li class="active">隐患数量</li>
							<li>整改率</li>
						</ul>
					</div>
					<div class="company2-sort clearfix">
						<img src="images/company/sort.png" alt="" />
						<span>排序</span>
					</div>
					<div class="company2-container company2-container2">
						<p class="company2-container-nav1">
							<span class="active">分公司</span> 一
							<span>项目部</span>
						</p>
						<div id="company2-chart2"></div>
					</div>
				</div>
				<div class="company2-con3">
					<div class="t-t">
						<p class="yl">风险动态管控</p>
						<ul class="company2-chart-nav3 company-nav">
							<li class="active">状态对比</li>
							<li>数量排行</li>
						</ul>
					</div>
					<div id="company2-chart3"></div>
					<div class="company2-container company2-container3" style="display: none;">
						<p class="company2-container-nav2">
							<span class="active">分公司</span> 一
							<span>项目部</span>
						</p>
						<div id="company2-chart4">

						</div>
					</div>
				</div>
				<div class="company2-con4">
					<div class="t-t">
						<p class="yl">隐患对比图</p>
						<ul class="company2-chart-nav4 company-nav">
							<li class="active">整改情况</li>
							<li>隐患类别</li>
						</ul>
					</div>
					<div id="company2-chart6"></div>
					<div id="company2-chart5" style="display: none;"></div>
					<div class="com2_5select">
						<div class="selected_div"><span>房建工程</span><img src="images/select_sanjiao.png"></div>
						<ul id="proType">
							<li>房建工程</li>
							<li>公路工程</li>
							<li>市政工程</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 一屏     -->
			<div class="comMain1 clearfix">
				<div class="comMain1_left">
					<div class="comSec1">
						<h3 class="comSec_title">电力板块安全状况</h3>
						<div id="com_chart1">
						</div>
						<span class="com_type">较安全</span>
					</div>

					<div class="comSec2">
						<h3 class="comSec_title">电力板块安全状况排名</h3>
						<div class="clearfix comTab">
							<ul class="clearfix fl comTab_list">
								<li class="selected">分公司</li>
								<li>项目部</li>
							</ul>

							<span class="fr sort">排序<img src="images/companyImg/sort_icon.png"></span>
						</div>

						<div class="comDiv">
							<table>
								<tr>
									<th>名次</th>
									<th>单位名称</th>
									<th>安全状况</th>
								</tr>
								<tr>
									<td>1</td>
									<td>中国华电集团上海分公司</td>
									<td>90</td>
								</tr>
								<tr>
									<td>2</td>
									<td>华电四川发电有限公司</td>
									<td>80</td>
								</tr>
								<tr>
									<td>3</td>
									<td>华电江西能源有限公司</td>
									<td>80</td>
								</tr>
								<tr>
									<td>4</td>
									<td>中国华电集团浙江分公司</td>
									<td>70</td>
								</tr>
								<tr>
									<td>5</td>
									<td>华电新疆发电有限公司</td>
									<td>60</td>
								</tr>
							</table>
						</div>
					</div>
				</div>

				<div class="comMain1_center">
					<div class="comSec3">
						<div class="sec3_title">
							<h4>基层单位数量：<span>150</span></h4></div>
						<div class="sec3_main" id="sec3_chart">
							<ul class="clearfix">
								<li>
									<div id="sec3_chart1"></div>
								</li>
								<li>
									<div id="sec3_chart2"></div>
								</li>
								<li>
									<div id="sec3_chart3"></div>
								</li>
								<li>
									<div id="sec3_chart4"></div>
								</li>
							</ul>
						</div>
					</div>

					<div class="comSec4">
						<div class="comSec4_top">
							<div class="search_pop">
								<span class="pop_btn"></span>
								<p class="search_line"></p>
								<div class="search_con">
									<div class="search clearfix">
										<div class="search_div">
											<input type="text" placeholder="请输入项目名称">
											<span></span>
										</div>
										<a class="search_btn">搜索</a>
									</div>

									<div class="project_con clearfix">
										<div class="project_name fl">
											<p><strong>项目名称</strong></p>
											<p>中石油武汉销售公司<br>流芳大道加油站</p>
										</div>
										<ul class="clearfix project_list fl">
											<li>
												<p><strong>安全状况：</strong><span class="span_color1">危险（58分）</span></p>
											</li>
											<li>
												<p><strong>项目类型：</strong><span>房建工程</span></p>
											</li>
											<li>
												<p><strong>行政区划：</strong><span>湖北省武汉市</span></p>
											</li>
											<li>
												<p><strong>开工日期：</strong><span>2019-01-01</span></p>
											</li>
											<li>
												<p><strong>项目经理：</strong><span>吴建</span></p>
											</li>
											<li>
												<p><strong>联系电话：</strong><span>13675984458</span></p>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>

						<div class="comSec4_main">
							<div id="map-panel" class="pro_map"></div>
						</div>
					</div>
				</div>

				<div class="comMain1_right">
					<div class="comSec5">
						<h3 class="comSec_title">电力板块安全应急预警指标</h3>
						<div class="comWarn" id="comWarn">
							<ul class="comWarn_list">
								<li><span>待监控重大风险数量</span>
									<a href="">2</a>
								</li>
								<li><span>待监控高风险作业数量</span>
									<a href="">10</a>
								</li>
								<li><span>逾期未整改重大隐患数量</span>
									<a href="">9</a>
								</li>
								<li><span>逾期未整改一般隐患占比</span>
									<a href="">20%</a>
								</li>
								<li><span>连续未检查天数</span>
									<a href="">10</a>
								</li>
								<li><span>待监控重大风险数量</span>
									<a href="">2</a>
								</li>
								<li><span>待监控高风险作业数量</span>
									<a href="">10</a>
								</li>
								<li><span>逾期未整改重大隐患数量</span>
									<a href="">9</a>
								</li>
								<li><span>逾期未整改一般隐患占比</span>
									<a href="">20%</a>
								</li>
								<li><span>连续未检查天数</span>
									<a href="">10</a>
								</li>
							</ul>
						</div>
					</div>

					<div class="comSec6">
						<h3 class="comSec_title">电力板块安全应急管控指标</h3>
						<div class="swiper-container comSec6_main">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<div class="comSec6_div">
										<h4>安全风险</h4>
										<ul class="sec6_list clearfix">
											<li>
												<img src="images/companyImg/safe_icon1.png">
												<p class="sec6_text">一级风险</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon2.png">
												<p class="sec6_text">二级风险</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon3.png">
												<p class="sec6_text mt2">当前高风险<br>作业</p>
												<p><strong>02</strong></p>
											</li>
										</ul>
									</div>
									<div class="comSec6_div">
										<h4 style="margin-top: 0.25rem">隐患治理</h4>
										<ul class="sec6_list clearfix">
											<li>
												<img src="images/companyImg/safe_icon4.png">
												<p class="sec6_text">未关闭隐患</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon5.png">
												<p class="sec6_text mt2">逾期未整改<br>隐患</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon6.png">
												<p class="sec6_text">隐患整改率</p>
												<p><strong>02</strong></p>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="comSec6_div">
										<h4>危大工程</h4>
										<ul class="sec6_list clearfix">
											<li>
												<img src="images/companyImg/safe_icon7.png">
												<p class="sec6_text mt2">危大工程辨<br>识</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon8.png">
												<p class="sec6_text mt2">正在施工危<br>大工程</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon9.png">
												<p class="sec6_text mt2">危大工程验<br>收</p>
												<p><strong>02</strong></p>
											</li>
										</ul>
									</div>
									<div class="comSec6_div">
										<h4 style="margin-top: 0.25rem">安全培训</h4>
										<ul class="sec6_list clearfix">
											<li>
												<img src="images/companyImg/safe_icon10.png">
												<p class="sec6_text">培训人数</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon11.png">
												<p class="sec6_text">培训率</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon12.png">
												<p class="sec6_text">培训合格率</p>
												<p><strong>02</strong></p>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="comSec6_div">
										<h4>特种设备</h4>
										<ul class="sec6_list clearfix">
											<li>
												<img src="images/companyImg/safe_icon13.png">
												<p class="sec6_text mt2">特种设备总<br>数</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon14.png">
												<p class="sec6_text mt2">已验收特种<br>设备</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon15.png">
												<p class="sec6_text mt2">逾期未检测<br>特种设备</p>
												<p><strong>02</strong></p>
											</li>
										</ul>
									</div>
									<div class="comSec6_div">
										<h4 style="margin-top: 0.25rem">例行工作</h4>
										<ul class="sec6_list clearfix">
											<li>
												<img src="images/companyImg/safe_icon16.png">
												<p class="sec6_text">违章人次</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon17.png">
												<p class="sec6_text">安全会议</p>
												<p><strong>02</strong></p>
											</li>
											<li>
												<img src="images/companyImg/safe_icon18.png">
												<p class="sec6_text">应急演练</p>
												<p><strong>02</strong></p>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<!-- Add Pagination -->
							<div class="pagination"></div>
						</div>
					</div>
				</div>

			</div>
			<!-- 三屏     -->
			<div class="company3 clearfix hide">
				<div class="company3-con1">
					<div class="t-t">
						<p class="yl">危大工程管控</p>
					</div>
					<div class="company3-table">
						<table>
							<tr>
								<th>单位名称</th>
								<th>预计开始时间</th>
								<th>预计结束时间</th>
								<th>验收次数</th>

							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
							<tr>
								<td>
									<p class="txt2">华电如皋热电公司</p>
								</td>
								<td>
									<p class="txt2">2020-02-28</p>
								</td>
								<td>2020-02-28</td>
								<td>4</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="company3-con2">
					<div class="t-t">
						<p class="yl">安全培训排名</p>
						<ul class="company3-chart-nav2 company-nav">
							<li class="active">培训人数</li>
							<li>人均次数</li>
							<li>人均学时</li>
						</ul>
					</div>
					<div id="company3-chart1"></div>
				</div>
				<div class="company3-con3">
					<div class="t-t">
						<p class="yl">特种设备管控</p>
					</div>
					<div id="company3-chart2"></div>
				</div>
				<div class="company3-con4">
					<div class="t-t">
						<p class="yl">领导履职排名</p>
						<ul class="company3-chart-nav4 company-nav">
							<li class="active">带班人数</li>
							<li>带班天数</li>
						</ul>
					</div>
					<div class="company3-sort clearfix">
						<img src="images/company/sort.png" alt="" />
						<span>排序</span>
					</div>
					<div class="company3-container">
						<p class="company3-container-nav">
							<span class="active">分公司</span> 一
							<span>项目部</span>
						</p>
						<div id="company3-chart3"></div>
					</div>
				</div>
			</div>
			<!--切换 箭头-->
			<img src="images/companyImg/left_btn1.png" class="comGoLeft">
			<img src="images/companyImg/right_btn1.png" class="comGoRight">
			<!--底部 分页-->
			<ul class="page_list clearfix">
				<li></li>
				<li class="current"></li>
				<li></li>
			</ul>
		</div>
	</body>
	<script src="js/rem.js"></script>
	<script src="js/echarts.min.js"></script>
	<script src="js/jquery-2.2.4.min.js"></script>
	<script src="js/jquery.liMarquee.js"></script>
	<script src="js/nicescroll.min.js"></script>
	<script src="js/idangerous.swiper.min.js"></script>
	<script src="js/common.js"></script>
	<script src="js/mapChart.js"></script>
	<script src="js/companyCharts2/echart1.js"></script>
	<script src="js/companyCharts2/echart2.js"></script>
	<script src="js/companyCharts2/echart3.js"></script>
	<script src="js/companyCharts2/echart4.js"></script>
	<script src="js/companyCharts2/echart5.js"></script>
	<script src="js/companyCharts2/echart6.js"></script>
	<script src="js/companyCharts3/echart1.js"></script>
	<script src="js/companyCharts3/echart2.js"></script>
	<script src="js/companyCharts3/echart3.js"></script>
	<script>
		$(function() {
		    $('.com2_5select').click(function () {
                $('.selected_div > img').toggleClass('showUl');
            })
		    $('.selected_div').click(function () {
				$('#proType').toggle();
            })
			$('#proType li').click(function () {
				var count = $(this).index();
				var textResult = $('#proType li').eq(count).text();
				$('.selected_div > span').text(textResult);
				$('#proType').hide();
            })
			$('.company2-container-nav1 span').click(function() { //分公司  项目部   样式切换
				$(this).attr('class', 'active').siblings().removeClass('active')
			})
			$('.company2-container-nav2 span').click(function() { //分公司  项目部  样式切换
				$(this).attr('class', 'active').siblings().removeClass('active')
			})
			$('.company3-container-nav span').click(function() { //分公司  项目部  样式切换
				$(this).attr('class', 'active').siblings().removeClass('active')
			})

			$('.company2-chart-nav1 li').click(function() { // 标题 导航  切换
				$(this).attr('class', 'active').siblings().removeClass('active')
				if($(this).index() == 1) {
					$('#company2-chart1').show()
					$('.company2-table').hide()
				} else {
					$('.company2-table').show()
					$('#company2-chart1').hide()
				}
			})
			$('.company2-chart-nav3 li').click(function() { // 标题 导航  切换
				$(this).attr('class', 'active').siblings().removeClass('active')
				if($(this).index() == 1) {
					$('.company2-container3').show()
					$('#company2-chart3').hide()
				} else {
					$('#company2-chart3').show()
					$('.company2-container3').hide()
				}
			})
			$('.company2-chart-nav4 li').click(function() { // 标题 导航  切换
				$(this).attr('class', 'active').siblings().removeClass('active')
				if($(this).index() == 1) {
                    $('#company2-chart5').show()
                    $('#company2-chart6').hide()
					$('.com2_5select').show()
				} else {
                    $('#company2-chart6').show()
                    $('#company2-chart5').hide()
                    $('.com2_5select').hide()
				}
			})
			$('.company2-sort').click(function() { // 排序 点击三角旋转
				$(this).toggleClass('company2-sort-active');
			})
			$('.company3-sort').click(function() { // 排序 点击三角旋转
				$(this).toggleClass('company3-sort-active');
			})
			$('.sort').click(function() { // 安全状况排名排序点击三角旋转
				$(this).toggleClass('sort2');
			})
			$('.pop_btn').click(function() { //默认页搜索弹出层展开收起
				$(this).toggleClass('pop_btn2');
				$('.search_con').slideToggle();
				$('.search_line').toggle()
			})
			$('.comTab_list li').click(function() { //安全状况排名    切换
				$(this).addClass('selected').siblings().removeClass('selected')
			})
			$("#comWarn").liMarquee({ //项目预警指标向上滚动
				direction: 'up',
				scrollamount: 30
			})
			var mySwiper = new Swiper('.swiper-container', { //安全管控指标轮播
				pagination: '.pagination',
				loop: true,
				autoplay: 2000, // 自动轮播 2秒一次
				paginationClickable: true
			})
			$('.swiper-container').mouseenter(function () {
				mySwiper.stopAutoplay();
            }).mouseleave(function () {
				mySwiper.startAutoplay();
            })
			setCompanyIndexCharts('30%', '危险2', 'sec3_chart1', '#fe2121', [30, 70]) //在建项目100 
			setCompanyIndexCharts('30%', '较危险2', 'sec3_chart2', '#ff7e00', [30, 70]) //在建项目100 
			setCompanyIndexCharts('30%', '较安全34', 'sec3_chart3', '#f6ff00', [30, 70]) //在建项目100 
			setCompanyIndexCharts('30%', '安全4', 'sec3_chart4', '#01fffc', [30, 70]) //在建项目100 
			setCompanyIndexCharts2() //公司安全状况仪表盘
			var scrollParam = { //滚动条 公共样式
				cursorcolor: '#3693f1',
				cursorwidth: 20,
				cursorborder: 'none',
				cursorborderradius: 0,
				autohidemode: false,
				cursorfixedheight: 50,
				background: '#092751',
			}
//			$('.company2-table').hide() //隐藏滚动条
//			$('.company3-table').hide() //隐藏滚动条
			$('.comGoRight').click(function() { //右切换功能
				var main1 = $('.company2').hasClass('hide');
				var main2 = $('.comMain1').hasClass('hide');
				var main3 = $('.company3').hasClass('hide');
				if(!main2) {
//					$('.company2-table').hide()
					$('.comMain1').addClass('hide');
					$('.company3').removeClass('hide');
					$('.company3-table').show().niceScroll(scrollParam)
					$('.page_list li').eq(2).addClass('current').siblings().removeClass('current') //控制底部  活动分页
				}
				if(!main1) {
					$('.company3-table').hide()
					$('.company2-table').hide()
					$('.company2').addClass('hide');
					$('.comMain1').removeClass('hide');
					$('.page_list li').eq(1).addClass('current').siblings().removeClass('current')
				}
				
				
			})
			$('.comGoLeft').click(function() { //左切换功能
				var main1 = $('.company2').hasClass('hide');
				var main2 = $('.comMain1').hasClass('hide');
				var main3 = $('.company3').hasClass('hide');
				if(!main2) {
					$('.company2').removeClass('hide');
					$('.company3-table').hide()
					$('.comMain1').addClass('hide');
					$('.company2-table').show().niceScroll(scrollParam)
					$('.page_list li').eq(0).addClass('current').siblings().removeClass('current')
					$('.company2-chart-nav1 li').eq(0).click()

				}
				if(!main3) {
					$('.company2-table').hide()
					$('.company3-table').hide()
					$('.company3').addClass('hide');
					$('.comMain1').removeClass('hide');
					$('.page_list li').eq(1).addClass('current').siblings().removeClass('current')
				}
				
//				$('.company2-chart-nav1 li').map(function(index, item) { //标题导航和展示内容      保持一致
//					if($(item).hasClass('active')) {
//						if(index == 1) {
//							$('#company2-chart1').show()
//							$('.company2-table').hide()
//						} else {
//							$('#company2-chart1').hide()
//							$('.company2-table').show().niceScroll(scrollParam)
//							
//						}
//					}
//				})
				$('.company2-chart-nav3 li').map(function(index, item) { //标题导航和展示内容      保持一致
					if($(item).hasClass('active')) {
						if(index == 0) {
							$('#company2-chart3').show()
							$('.company2-container3').hide()
						} else {
							$('#company2-chart3').hide()
							$('.company2-container3').show()
						}
					}
				})
				$('.company2-chart-nav4 li').map(function(index, item) { //标题导航和展示内容      保持一致
					if($(item).hasClass('active')) {
						if(index == 1) {
                            $('#company2-chart6').hide()
                            $('#company2-chart5').show()
                            $('.com2_5select').show()
						} else {
                            $('#company2-chart6').show()
                            $('#company2-chart5').hide()
                            $('.com2_5select').hide()
						}
					}
				})
			})
			checkType() //  兼容浏览器  文字溢出效果
		})

		function checkType() {
			var userAgent = navigator.userAgent
			var chr = userAgent.indexOf('Chrome') > -1;
			if(chr) {
				$('.company2-table td p').map(function(index, item) {
					$(item).attr('class', 'txt1')
				})
			}
		}

		function setCompanyIndexCharts(title, subtext, id, color, data) {
			var option = {
				title: {
					text: title,
					subtext: subtext,
					subtextStyle: {
						color: color
					},
					textStyle: {
						color: '#eff1f3',
						fontWeight: 'normal',
						fontSize: 14
					},
					x: 'center',
					y: '30%'
				},
				grid: {
					top: '8%',
					containLabel: true
				},
				calculable: true,
				series: [{
					name: '',
					type: 'pie',
					radius: ['70%', '90%'],
					sort: 'ascending', // for funnel
					data: data,
					hoverAnimation: false,
					label: {
						normal: {
							show: false,
						}
					},
					itemStyle: {
						normal: {
							color: function(params) {
								var colorList1 = [color, '#16438f']
								return colorList1[params.dataIndex]
							},
						},

					}
				}]
			};
			var chart = echarts.init(document.getElementById(id));
			chart.setOption(option);
		}

		function setCompanyIndexCharts2() { //公司安全状况仪表盘
			var option = {
				tooltip: {
					formatter: "{a} <br/>{c} {b}"
				},

				legend: {
					x: 'center',
					bottom: '0',
					itemWidth: 14,
					itemHeight: 14,
					iconRadius: 3,
					itemGap: 15,
					data: ['危险 0-59分', '较危险 60-69分', '较安全 70-89分', '安全 90-100分'],
					textStyle: {
						color: 'auto',
						fontSize: 14,
						fontWeight: 100,
					},
					color: ['#ff5a4a', '#ffc100', '#5ddefe', '#00ff9c'],
				},
				toolbox: {
					show: false,
				},
				xAxis: [ //这里有很多的show，必须都设置成不显示
					{
						type: 'category',
						data: [],
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
						splitArea: {
							interval: 'auto',
							show: false
						}
					}
				],
				yAxis: [ //这里有很多的show，必须都设置成不显示
					{
						type: 'value',
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
					}
				],
				series: [

					{
						name: '危险 0-59分',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#ff4b4b'
							}
						}

					},
					{
						name: '较危险 60-69分',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#ff8041'
							}
						}

					},
					{
						name: '较安全 70-89分',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#fffa65'
							}
						}

					},
					{
						name: '安全 90-100分',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#5cdeff'
							}
						}

					},
					{
						name: '加油加气站安全状态',
						type: 'gauge',
						splitNumber: 10,
						center: ['50%', '45%'],
						axisLine: {
							show: true,
							lineStyle: { // 属性lineStyle控制线条样式
								width: 5,
								color: [
									[0.6, '#ff4b4b'],
									[0.7, '#ff8041'],
									[0.9, '#fffa65'],
									[1, '#5cdeff']
								]
							},

						},
						axisTick: { // 坐标轴小标记
							length: 8, // 属性length控制线长

						},
						axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
							textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
								color: '#fff'
							}
						},
						splitLine: { // 分隔线
							show: true, // 默认显示，属性show控制显示与否
							length: 12, // 属性length控制线长
							lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
								color: 'auto'
							}
						},
						pointer: {
							width: 5
						},
						detail: {
							formatter: "{value}分",
							rich: {
								score: {
									color: 'auto',
									fontFamily: '微软雅黑'
								}
							},
							textStyle: {
								fontSize: 14
							}

						},
						data: [{
							value: 78.8
						}]
					}
				]
			};
			var Chart = echarts.init(document.getElementById('com_chart1'));
			Chart.setOption(option);
		}
	</script>

</html>